<script>
import {nanoid} from 'nanoid';

export default {
  name: "TodoHeader",
  data() {
    return {
      title: ''
    }
  },
  methods: {
    add() {
      // console.log(event.target.value)
      // console.log(this.title)

      if (!this.title.trim()) {
        return;
      }
      const todoObj = {
        id: nanoid(),
        title: this.title,
        done: false
      };
      console.log(todoObj);
      this.receiver(todoObj);
      this.title = '';
    }
  },
  props: ['receiver']
}

</script>

<template>
  <div class="header">
    <h2>this is header</h2>
    <input type="text" v-model:title="title" @keyup.enter="add">
  </div>

</template>

<style scoped lang="less">
.header {
  background: #42b983;
}
</style>
